import { PROD_STATUS } from '@/consts/project'
import { Form, Tag } from 'antd'
import { connect, history } from 'umi';
import ProdDetail from './ProdDetail'
const FormItem = Form.Item;
import ProdPage from './ProdPage'

export const ProdStatus = (props) => {
    const {
        status
    } = props

    if (status || status === 0) {
        return <Tag color={PROD_STATUS[status]?.color}>{PROD_STATUS[status]?.name}</Tag>
    }
    return (
        <Tag>/</Tag>
    )
}

const ProjectProduct = (props) => {
    const {
        projectId,
        dispatch,
        routeParam,
        queryInitParams,
        projectPermission
    } = props

    if (routeParam.tab !== 'prod') {
        return <></>;
    }

    if (routeParam.itemId) {
        return <ProdDetail projectId={projectId} projectPermission={projectPermission} prodId={routeParam.itemId} routeTabKey={routeParam.itemTab}></ProdDetail>
    }
    const onQueryParamChange = (params) => {
        dispatch({
            type: 'queryParams/saveQueryParams',
            payload: {
                name: "prodPage",
                params: params
            }
        });
    }

    return <>
        <ProdPage projectId={projectId} projectPermission={projectPermission} onQueryParamChange={onQueryParamChange} queryInitParams={queryInitParams} />
    </>
}


export default connect(({ queryParams }) => ({
    queryInitParams: queryParams.prodPage,
}))(ProjectProduct);